<template>
  <loading-empty-wrapper class="h-full" :loading="loading" :empty="empty">
    <n-data-table
      :columns="columns"
      :data="rowData"
      :pagination="pagination"
      :bordered="false"
      :single-line="false"
      :row-key="rowData.A_SEQ"
      :row-class-name="rowClassName"
      virtual-scroll
      flex-height
      size="small"
      class="h-full"
      striped
    />
  </loading-empty-wrapper>
</template>

<script setup lang="tsx">
import { onMounted, ref, reactive, computed, watch, onUnmounted } from 'vue';
import type { DataTableColumn, PaginationProps } from 'naive-ui';
import { fetchPurchaseDeductionItems } from '@/service';
import { useBillContext } from '@/context';
import { useLoadingEmpty } from '@/hooks';

const { useInject } = useBillContext();
const { billNo } = useInject();

// 初始加载
const { loading, startLoading, endLoading, empty } = useLoadingEmpty();

// 获取接口数据并处理加载状态
async function getDataSource(n: any) {
  startLoading();
  const { data } = await fetchPurchaseDeductionItems(n);
  if (data) {
    setDataSource(data);
    endLoading();
  } else {
    endLoading();
  }
}

// 处理接口数据
const rowData = ref<any>([]);
function setDataSource(data: any) {
  rowData.value = data;
}

// 配置分页参数
const pagination: PaginationProps = reactive({
  page: 1,
  pageSlot: 7,
  pageSize: 20,
  size: 'small',
  showSizePicker: true,
  showQuickJumper: true,
  pageSizes: [10, 20, 50, 100, 200, 500],
  suffix({ itemCount }) {
    return `共${itemCount}条记录`;
  },
  onChange: (page: number) => {
    pagination.page = page;
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
  }
});

// 获取表格当前页总行数
const pager: any = pagination;
const pageItemTotal = computed(() => (pager.page - 1) * pager.pageSize);

// 配置表格列参数
const columns: DataTableColumn[] = [
  {
    title: '',
    key: 'serial',
    width: 30,
    align: 'center',
    fixed: 'left',
    render(_, index) {
      return `${index + 1 + pageItemTotal.value}`;
    }
  },
  {
    key: 'A_OROPTYPEID_DESCRIPTION',
    title: '费用名称',
    sorter: 'default',
    width: 180
  },
  {
    key: 'A_OROPTYPEID_FVALUE1',
    title: '账款变化情况',
    sorter: 'default',
    width: 120,
    render: (row: any) => {
      const textNames: any = {
        0: '帐款增加',
        1: '帐款减少',
        2: '帐款不变'
      };
      return textNames[row.A_OROPTYPEID_FVALUE1];
    }
  },
  {
    key: 'A_OROPTYPEID_FVALUE5',
    title: '业务冲抵',
    sorter: 'default',
    width: 80,
    align: 'center',
    render: (row: any) => {
      const textNames: any = {
        0: '未冲抵',
        1: '已冲抵'
      };
      return textNames[row.A_OROPTYPEID_FVALUE5];
    }
  },
  {
    key: 'A_RECEIVEPAY_DESCRIPTION',
    title: '支付方式',
    sorter: 'default',
    width: 180
  },
  {
    key: 'A_AMT',
    title: '金额',
    sorter: 'default',
    width: 80
  },
  {
    key: 'A_REMARK',
    title: '备注',
    sorter: 'default'
  }
];

// 处理表格需要标记的行
const rowClassName = (row: any) => {
  const color: any = row.COLOR;
  if (color) {
    if (color === 1) {
      return 'text-red';
    }
    if (color === 2) {
      return 'bg-yellow';
    }
    if (color === 3) {
      return 'text-red bg-yellow';
    }
  }
  return '';
};

// 监听对账单ID是否发生变化
const watchBillNo = watch(
  () => billNo.value,
  newId => {
    getDataSource(newId);
  }
);

// 销毁监听
onUnmounted(() => {
  watchBillNo();
});

onMounted(() => {
  getDataSource(billNo.value);
});
</script>

<style scoped>
:deep(.text-red td) {
  color: rgb(255, 0, 0) !important;
}

:deep(.bg-yellow td) {
  background-color: rgb(255, 255, 210) !important;
}

html.dark div:deep(.bg-yellow td) {
  background-color: rgb(73, 67, 49) !important;
}
</style>
